<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">2020-12-16</div>
    <ul>
        <li>黄河远上白云间</li>
        <li>黄河远上白云间</li>
        <li>黄河远上白云间</li>
        <li>黄河远上白云间</li>
        <li>黄河远上白云间</li>
    </ul>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div class="box">盒子</div>   
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>index</li>
            <li>index</li>
            <li>index</li>
            <li>index</li>
        </ul>
    </div>
    <script>
        // 1.因为文档页面从上往下加载, 所有先有标签, script写到标签的下面
        // 2.get 获取element元素by通过驼峰命名法
        // 3.参数id是大小写敏感的字符串
        // 4.返回是一个元素的对象

        // DOM在我们实际开发中主要用来操作元素

        
        // 1.根据id获取
            var t = document.getElementById('time')
            console.log(t);   
            console.log(typeof t);
         // console.dir() 打印我们返回的元素对象 更好的查看里面的属性和方法
            console.dir(t);
        // 2.根据标签获取
            var liArr = document.getElementsByTagName('li');
            console.log(liArr);
            console.log(liArr[0])
            // 如果页面中只有一个li返回的是伪数组的形式
            // 如果页面中没有这个元素返回伪数组的形式
            // 通过 element.getElementsByTagName('标签名')
            var lis = document.getElementsByTagName('ul')[0].getElementsByTagName('li')
   
            console.log(lis);
        // 3.通过HTML5新增的方法获取
        // getElementsByClassName 根据类名获得某些元素集合
            var boxs = document.getElementsByClassName('box')
            console.log(boxs)
        // querySelector 返回指定选择器的第一个元素对象
        console.log('-------------------');
        // querySelectorAll 返回指定选择器的所有元素对象
        var firstBox = document.querySelectorAll('.box')
        console.log(firstBox)
        var nav = document.querySelectorAll('#nav')
        console.log(nav)
        var li = document.querySelectorAll('li')
        console.log(li);
        // 4.特殊元素获取
        // 1).获取body元素
        var bodyEle = document.body
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2).获取html元素
        var html = document.documentElement;
        console.log(html)
    </script>

</body>
</html>